<!--
- Author:  LiShibin.
- Date:    2017/9/29 0029.
- File:    推荐的心情日记
-->
<template>
  <div class="Web_Box"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="false"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false">
    <div class=" xd top_bg" style="position: fixed; width: 100%;">
      <div class="logo" @click="gotoHome"><i class="iconfont icon-logo"></i></div>
      <div style="width: 8rem; margin: 0 auto; line-height: 45px; color: #fff; font-size: 16px; text-align: center">遇见</div>
      <!--<div class="search_index" style="width: 8rem">-->
        <!--<form action="" @submit="search">-->
          <!--<i class="iconfont icon-search" @click="search"></i><input type="search" autocomplete="off" v-model="keyword" placeholder="输入搜索关键字" style="font-size: 14px;color: #fff; padding-left: 15px;">-->
        <!--</form>-->
      <!--</div>-->
      <div class="location">
        <p style="line-height:35px;text-decoration:underline; color: #fff" @click="gotoAddDiary">我要发布<i class="iconfont icon-uayuanwen"></i></p>
      </div>
    </div>
    <div style="margin-top: 50px;">
    <div class="bg_fff mb10" v-for="diary in diaryList.data">
      <div class="diary">
        <ul class=" f-cb">
          <li class="imgs" @click="gotoBlog(diary.member_id, '0')"><img :src="diary.member_avatar ? $config.imgsite + $config.avatarSrc + diary.member_avatar + '_w150' : defaultAvatar"></li>
          <li class="pl20 w480">
            <h3 class="d_tit"><span @click="gotoBlog(diary.member_id, '0')">{{diary.member_name}}</span></h3>
            <!--<p class="slh">{{diary.add_time | timestampToDate('yyyy-MM-dd')}}</p>-->
            <div class="blk_img2 photoBrowser">
              <ul class="f-cb" v-if="diary.images && diary.images.length>0">
                <li v-for="(img, imgIndex) in diary.images" @click="showImg(diary.imgList, imgIndex)"><img :src="$config.imgsite + $config.uploadImgSrc + img + '_w200'"></li>
              </ul>
              <div class="g_cont pt10" v-show="diary.content">{{diary.content}}</div>
              <div class="Locations"><span class="pl30">{{diary.add_time | getDateDiff}}</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    </div>
    <loading-more :allLoaded="diaryList.allLoaded" :show="diaryList.data.length > 0"></loading-more>
    <empty-data :show="diaryList.allLoaded && diaryList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {imgPreview} from '../../../components/previewer'

  export default{
    data() {
      return {
        defaultAvatar: require('../../../assets/images/avatar.png'),
        diaryList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getDiaryList(this.diaryList.page, this.diaryList.pageSize)
    },
    mounted() {
      this.$native.weixinShare(window.location.href, '遇见', null, '遇花园')
    },
    methods: {
      gotoHome() {
        this.$router.push({name: 'home'})
      },
      gotoAddDiary() {
        // this.$router.push({name: 'diary-add'})
        window.location.href = 'http://' + window.location.host + '/wap/blog/diary/add/'
      },
      gotoBlog(memberId, showType) {
        this.$router.push({name: 'blog-index', query: {member: memberId, showType: showType}})
      },
      showImg(imgList, index) {
        imgPreview({imgList: imgList, index: index})
      },
      getImgListWH(imgList) {
        for (let i = 0; i < imgList.length; i++) {
          this.$utils.imgLoaded(imgList[i].src).then(img => {
            imgList[i].w = img.width
            imgList[i].h = img.height
          })
        }
      },
      getDiaryList(page, pageSize) {
        this.diaryList.loading = true
        this.$request.getDiaryList(page, pageSize).then(data => {
          if (data.length < this.diaryList.pageSize) {
            this.diaryList.allLoaded = true
          }
          for (let i = 0; i < data.length; i++) {
            if (!data[i].images) {
              continue
            }
            data[i].imgList = [] // 新定义一个数组列表，格式为photeswipe所需要的格式
            for (let j = 0; j < data[i].images.length; j++) {
              console.log(data[i].images[j])
              let src = this.$config.imgsite + this.$config.uploadImgSrc + data[i].images[j] + '_gdw640'
              let img = {src: src, w: 800, h: 600} // 设置为photeswipe 需要的格式，先给图片个默认宽高
              data[i].imgList.push(img)
            }
            this.getImgListWH(data[i].imgList) // 异步获取图片的实际宽高
          }
          this.diaryList.data = [...this.diaryList.data, ...data]
        }).finally(() => {
          this.diaryList.requested = true
          this.diaryList.loading = false
        })
      },
      loadMore() {
        if (this.diaryList.loading || this.diaryList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getDiaryList(++this.diaryList.page, this.diaryList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>